<section class="bg-white dark:bg-gray-900">
    <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
        <h2 class="mb-8 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white" data-inline-editable>
            Frequently asked questions
        </h2>
        <div class="grid pt-8 text-left border-t border-gray-200 md:gap-16 dark:border-gray-700 md:grid-cols-2">
            <div>
                <div class="mb-10">
                    <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                        <svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span data-inline-editable>What do you mean by "Figma assets"?</span>
                    </h3>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        You will have access to download the full Figma project
                        including all of the pages, the components, responsive pages, and also the icons, illustrations,
                        and images included in the screens.
                    </p>
                </div>
                <div class="mb-10">
                    <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                        <svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span data-inline-editable>What does "lifetime access" exactly mean?</span>
                    </h3>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        Once you have purchased either the design, code, or both
                        packages, you will have access to all of the future updates based on the roadmap, free of
                        charge.
                    </p>
                </div>
                <div class="mb-10">
                    <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                        <svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span data-inline-editable>How does support work?</span>
                    </h3>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        We're aware of the importance of well qualified support,
                        that is why we decided that support will only be provided by the authors that actually worked on
                        this project.
                    </p>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        Feel free to <a href="#"
                            class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
                            target="_blank" rel="noreferrer">
                            <span data-inline-editable>contact us</span>
                        </a> and we'll help you out as soon as we can.
                    </p>
                </div>
                <div class="mb-10">
                    <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                        <svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span data-inline-editable>I want to build more than one project. Is that allowed?</span>
                    </h3>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        You can use FluentCMS for an unlimited amount of
                        projects, whether it's a personal website, a SaaS app, or a website for a client. As long as you
                        don't build a product that will directly compete with FluentCMS either as a UI kit, theme, or
                        template, it's fine.
                    </p>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        Find out more information by <a href="#"
                            class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">
                            <span data-inline-editable>reading the license</span>
                        </a>.
                    </p>
                </div>
            </div>
            <div>
                <div class="mb-10">
                    <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                        <svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span data-inline-editable>What does "free updates" include?</span>
                    </h3>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        The free updates that will be
                        provided is based on the
                        <a href="#"
                            class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">
                            <span data-inline-editable>roadmap</span>
                        </a>
                        that we have laid out for this project. It is also possible that we will provide extra updates
                        outside of the roadmap as well.
                    </p>
                </div>
                <div class="mb-10">
                    <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                        <svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span data-inline-editable>What does the free version include?</span>
                    </h3>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>The
                        <a href="#"
                            class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">
                            <span data-inline-editable>free version</span>
                        </a>
                        of FluentCMS includes a minimal style guidelines, component variants, and a
                        dashboard page with the mobile version alongside it.
                    </p>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        You can use this version for any purposes, because it is
                        open-source under the MIT license.
                    </p>
                </div>
                <div class="mb-10">
                    <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                        <svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span data-inline-editable>What is the difference between FluentCMS and Tailwind UI?</span>
                    </h3>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        Although both FluentCMS and Tailwind
                        UI are built for
                        integration with Tailwind CSS, the main difference is in the design, the pages, the extra
                        components and UI elements that FluentCMS includes.
                    </p>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        Additionally, FluentCMS is a project that is still in
                        development, and later it will include both the application, marketing, and e-commerce UI
                        interfaces.
                    </p>
                </div>
                <div class="mb-10">
                    <h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
                        <svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span data-inline-editable>Can I use FluentCMS in open-source projects?</span>
                    </h3>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        Generally, it is accepted to use FluentCMS in open-source
                        projects, as long as it is not a UI library, a theme, a template, a page-builder that would be
                        considered as an alternative to FluentCMS itself.
                    </p>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        With that being said, feel free to use this design kit
                        for your open-source projects.
                    </p>
                    <p class="text-gray-500 dark:text-gray-400" data-inline-editable>
                        Find out more information by <a href="#"
                            class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">
                            <span data-inline-editable>reading the license</span>
                        </a>.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>